<template>
  <div>
    <a-card>
      <a-space>
        <#list tableColumns as table>
          <#if table.javaType?contains('String')>
            <a-input
                    v-model:value="listQuery.${table.javaName}"
                    placeholder="输入条件${table.comment}搜索"
                    allow-clear
                    @keyup.enter="handleFilter"
            />
          </#if>
        </#list>
        <a-button type="primary" :icon="h(SearchOutlined)" @click="handleFilter">搜索</a-button>
      </a-space>
    </a-card>
    <a-card class="mt-2">
      <a-button type="primary" class="mb-4" :icon="h(PlusOutlined)" @click="handleAdd">
        添加
      </a-button>
      <a-table
          bordered
          :columns="columns"
          :data-source="data"
          :pagination="pagination"
          :loading="tableLoading"
          :row-key="(row) => row.id + ''"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'actions'">
            <a-button size="small" type="link" @click="handleEdit(record)">编辑</a-button>
            <a-button size="small" type="link" danger @click="handleDelete(record)">删除</a-button>
          </template>
        </template>
      </a-table>
    </a-card>
    <a-modal v-model:open="showModal" :mask-closable="false" :title="title">
      <a-form
          ref="formRef"
          :model="form"
          :rules="rules"
          :label-col="{ span: 5 }"
          style="padding-top: 20px"
      >
        <#list tableColumns as table>
          <a-form-item label="${table.comment}" name="${table.javaName}">
            <a-input v-model:value="form.${table.javaName}" allow-clear placeholder="请输入${table.comment}" />
          </a-form-item>
        </#list>
      </a-form>
      <template #footer>
        <a-button type="primary" :loading="formBtnLoading" @click="handleConfirm">提交</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { h, onMounted, reactive, ref } from 'vue';
import ${name}Api from '@/api/${name}Api';
import { PlusOutlined, SearchOutlined } from '@ant-design/icons-vue';
import { message, Modal } from 'ant-design-vue';
import { Rule } from 'ant-design-vue/es/form';
import { resetReactive } from '@/utils';

let columns = [
  <#list tableColumns as table>
    { title: '${table.comment}', dataIndex: '${table.javaName}' },
  </#list>
  {
    title: '操作',
    dataIndex: 'actions',
    align: 'center',
  },
];
let data = ref([]);
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  onChange: (current, pageSize) => {
    pagination.current = current;
    pagination.pageSize = pageSize;
    getList();
  },
});
onMounted(() => {
  getList();
});

const listQuery = reactive<any>({});

const tableLoading = ref(false);

function getList() {
  tableLoading.value = true;
  ${name}Api.page({ index: pagination.current, size: pagination.pageSize, ...listQuery })
      .then((res) => {
        data.value = res.data;
        pagination.total = res.total;
      })
      .finally(() => (tableLoading.value = false));
}

function handleFilter() {
  pagination.current = 1;
  getList();
}

const showModal = ref(false);
const title = ref('');
const formRef = ref();
let form = reactive<any>({});
const rules: Record<string, Rule[]> = {
  name: [{ required: true, trigger: 'blur', message: '请输入' }],
};

function handleEdit(row) {
  showModal.value = true;
  title.value = '编辑';
  Object.assign(form, row);
  formRef.value?.clearValidate();
}

function handleAdd() {
  showModal.value = true;
  title.value = '添加';
  resetReactive(form);
  formRef.value?.clearValidate();
}

const formBtnLoading = ref(false);

function handleConfirm() {
  formRef.value
      .validate()
      .then(() => {
        formBtnLoading.value = true;
        (form.id ? ${name}Api.update(form) : ${name}Api.save(form))
            .then(() => {
              message.success('提交成功');
              showModal.value = false;
              getList();
            })
            .finally(() => {
              formBtnLoading.value = false;
            });
      })
      .catch(() => {});
}

function handleDelete(row) {
  Modal.confirm({
    title: '提示',
    content: '确定删除这条记录吗',
    onOk() {
      ${name}Api.delete([row.id]).then(() => {
        message.success('操作成功');
        getList();
      });
    },
    onCancel() {},
  });
}
</script>

<style scoped></style>
